<template>
  <view class="card" @click="lookDetails">
    <view class="imgdis" v-if="info.use_status == 2 && (status == 0 || status == 3)">
      <image class="stock_icons" src="@/pagesB/static/img/icon/disable.png" />
    </view>
    <view class="point-name">
      <view class="device-code">

        <view>设备编号：</view>
        <text user-select>{{ info.device_sn }}</text>
      </view>
      <view class="stock">
        <view v-if="status == 0 || status == 1">

          <block v-if="info.game_time_status == '0'">
            <view class="stop_flex">
              <view class="stock_top">
                <image class="stock_icons" src="@/pagesB/static/img/icon/shui0.png" />
              </view>
              <view class="stock_width">
                <view class="stock_buttom" :style="{ color: '#bfbfbf' }">{{ num }}</view>
                <view class="stock_warn" :style="{ color: '#bfbfbf' }">未知</view>
              </view>
            </view>
          </block>
          <block v-else-if="info.game_time_status == '10'">
            <view class="stop_flex">
              <view class="stock_top">
                <image class="stock_icons" src="@/pagesB/static/img/icon/shui10.png" />
              </view>
              <view>

                <view class="stock_buttom" :style="{ color: '#fb2020' }">{{ num }}</view>
                <view class="stock_warn" :style="{ color: '#fb2020' }">缺水</view>
              </view>
            </view>
          </block>
          <block v-else-if="info.game_time_status == '20'">
            <view class="stop_flex">
              <view class="stock_top">
                <image class="stock_icons" src="@/pagesB/static/img/icon/shui20.png" />
              </view>
              <view>
                <view class="stock_buttom" :style="{ color: '#fba620' }">{{ num }}</view>
                <view class="stock_warn" :style="{ color: '#fba620' }">警告</view>
              </view>
            </view>
          </block>
          <block v-else-if="info.game_time_status == '30'">
            <view class="stop_flex">
              <view class="stock_top">
                <image class="stock_icons" src="@/pagesB/static/img/icon/shui30.png" />
              </view>
              <view>
                <view class="stock_buttom" :style="{ color: '#2ffb20' }">{{ num }}</view>
                <view class="stock_warn" :style="{ color: '#2ffb20' }">充足</view>
              </view>
            </view>
          </block>
        </view>
        <view v-if="status == 0 || status == 2">

          <block v-if="info.electricity_status == '0'">
            <view class="stop_flex">
              <view class="stock_top_d">
                <image class="stock_icond" src="@/pagesB/static/img/icon/dian0.png" />
              </view>
              <view>
                <view class="stock_buttom" :style="{ color: '#bfbfbf' }">{{ info.electricity || 0 }}</view>
                <view class="stock_warn" :style="{ color: '#bfbfbf' }">未知</view>
              </view>
            </view>
          </block>

          <block v-else-if="info.electricity_status == '10'">
            <view class="stop_flex">
              <view class="stock_top_d">
                <view class="stock_zhe"
                  :style="{ height: `${electricityNum}rpx`, backgroundColor: `${electricityColor}` }">

                </view>
                <image class="stock_icond" src="@/pagesB/static/img/icon/dian.png" />

              </view>
              <view>
                <view class="stock_buttom" :style="{ color: '#fb2020' }">{{ info.electricity || 0 }}</view>
                <view class="stock_warn" :style="{ color: '#fb2020' }">缺电</view>
              </view>
            </view>
          </block>
          <block v-else-if="info.electricity_status == '15'">
            <view class="stop_flex">
              <view class="stock_top_d">
                <view class="stock_zhe"
                  :style="{ height: `${electricityNum}rpx`, backgroundColor: `${electricityColor}` }">

                </view>
                <image class="stock_icond" src="@/pagesB/static/img/icon/dian.png" />
              </view>
              <view>
                <view class="stock_buttom" :style="{ color: '#fba120' }">{{ info.electricity || 0 }}</view>
                <view class="stock_warn" :style="{ color: '#fba120' }">警告</view>
              </view>
            </view>
          </block>
          <block v-else-if="info.electricity_status == '20'">
            <view class="stop_flex">
              <view class="stock_top_d">
                <view class="stock_zhe"
                  :style="{ height: `${electricityNum}rpx`, backgroundColor: `${electricityColor}` }">

                </view>
                <image class="stock_icond" src="@/pagesB/static/img/icon/dian.png" />
              </view>
              <view>
                <view class="stock_buttom" :style="{ color: '#3cc6ff' }">{{ info.electricity || 0 }}</view>
                <view class="stock_warn" :style="{ color: '#3cc6ff' }">正常</view>
              </view>
            </view>
          </block>


          <block v-else-if="info.electricity_status == '30'">
            <view class="stop_flex">
              <view class="stock_top_d">
                <view class="stock_zhe"
                  :style="{ height: `${electricityNum}rpx`, backgroundColor: `${electricityColor}` }">

                </view>
                <image class="stock_icond" src="@/pagesB/static/img/icon/dian.png" />
              </view>
              <view>
                <view class="stock_buttom" :style="{ color: '#2ffb20' }">{{ info.electricity || 0 }}</view>
                <view class="stock_warn" :style="{ color: '#2ffb20' }">满电</view>
              </view>
            </view>
          </block>
        </view>
        <view v-if="status == 0">

          <block>
            <view class="stop_flex_s">
              <view class="stock_top">

                <view class="stock_buttom" :style="{ color: !info.csq_level_status ? '#fb2020' : '#3cc6ff' }">{{
                  info.csq_level || 0 }}</view>
                <image class="" :src="src" />
              </view>
              <view>
                <view class="stock_warn" :style="{ color: !info.csq_level_status ? '#fb2020' : '#3cc6ff' }">信号</view>
              </view>
            </view>
          </block>

        </view>

      </view>
    </view >
    <view class="point-name">
      <view class="device-code">
        <view>系统码：</view>
        <text user-select>{{ info.vCode != 0 && info.vCode ? info.vCode : '未绑定' }}</text>
      </view>
    </view>
    <view class="point-name">
      <view class="device-code">
        <view>{{ vPointName }}：</view>
        <view class="address textMaxTwoLine">{{ info.hotelName }}</view>
      </view>
    </view>
    <view class="point-name">
      <view class="device-code">
        <view>最近成交：</view>
        <view class="address textMaxTwoLine">{{ info.lastest_order_time_str }}</view>
      </view>
    </view>
    <view class="flexRowBetween" style="justify-content: flex-start">
      <view class="device-code">

        <view><text>{{
          info.isGameDevice
          ? "游戏规则："
          : info.isRechargeDevice
            ? "充电规则："
            : "库存总数："
        }}</text></view>
        <view><text>{{ shopStatus }}</text></view>
      </view>
    </view>

    <view class="point-name">
      <view>
        <view class="device_item">
          <view>灯状态：</view>
          <view :style="{ color: info.light_status == 1 ? '#0EADE2' : 'red' }">{{ info.light_status == 1 ? '开启' : '关闭' }}
          </view>
        </view>
      </view>
      <view>
        <view class="device_item">
          <view>提示音状态：</view>
          <view :style="{ color: linghtStatus == 1 ? '#0EADE2' : 'red' }">{{ linghtStatus == 1 ? '开启' : '关闭' }}</view>
        </view>
      </view>
    </view>
  
    <!-- <view class="point-name" v-if="info.use_status==1">
      <view class="device-code">
        <view>灯光开启时间：</view>
        <view>{{ info.startTime||'09:00' }} - {{ info.endTime||'10:00' }}</view>
      </view>
    </view> -->
    <view>
      <view class="online">
        <block v-if="info.status == 1">
          <image class="online_icon" src="@/pagesB/static/img/icon/device_online_icon.png" />
          <view class="theme-color">在线</view>
        </block>
        <block v-if="info.status == 2">
          <image class="online_icon" src="@/pagesB/static/img/icon/device_unline_icon.png" />
          <view class="text-warn">异常</view>
        </block>
        <block v-if="info.status == 3">
          <image class="online_icon" src="@/pagesB/static/img/icon/device_unline_icon.png" />
          <view class="text-warn">离线</view>
        </block>
      </view>

      <view class="themeComColor" @click.stop="lookDetails">查看详情</view>
    </view>
    <view class="updata">
      <BaseUpdata title="灯电量" :time="info.report_time" @onClick="updataClick" :refresh="manyUpdata" iosSize="35"></BaseUpdata>
    </view>
  </view>
</template>

<script>
import BaseUpdata from "@/components/base/BaseUpdata.vue";
export default {
  components: {
    BaseUpdata,

  },

  name: "ReplenishListCard",
  props: {
    info: {
      type: Object,
      default: {},
    },
    status: { type: Number, default: 0 }
  },
  data() {
    return {
      electricity: 1700
    }
  },
  methods: {
    lookDetails() {
      uni.navigateTo({
        url:
          "/pagesB/device/DeviceGoodsList?from=replenish&device_sn=" +
          this.info.device_sn,
      });
    },
    /* 更新时间 */
    updataClick() {
      // console.log('',)
      this.$emit('updataTime');

    },
  },
  computed: {
    shopStatus() {
      // 状态
      if (this.info.shopstatus) {
        return this.info.shopstatus.replace(/\\n/g, "\n");
      } else {
        return "未设置";
      }
    },
    num() {
      if (this.info.remain_game_time > 0) {
        return (this.info.remain_game_time / this.vGamingTime).toFixed(1)
      } else {
        return 0
      }


    },
    linghtStatus() {
      if (this.info.tip_music) {
        let a = this.info.tip_music.split(',')
        console.log('提示音状态', a)
        return this.info.tip_music.split(',')[0]
      }
    },
    electricityNum() {

      if (this.info.electricity > 11000) {
        if (this.info.electricity >= 12800) {
          return 40
        }
        let height = ((this.info.electricity - 11000) / (this.electricity / 40)).toFixed(0)
        console.log('高度', height)
        return height
      } else {
        return 1
      }
    },
    electricityColor() {
      if (this.info.electricity) {
        if (this.info.electricity >= 12800) {
          return '#2ffb20'
        } else if (
          this.info.electricity < 12800 && this.info.electricity >= 11500
        ) {
          return '#3cc6ff'
        } else if (this.info.electricity < 11500 && this.info.electricity > 11000) {
          return '#fba120'
        } else {
          return '#fb2020'
        }
      } else {

      }

    },
    src() {

      if (this.info.csq_level) {
        if (this.info.csq_level >= 28) {
          return require("@/pagesB/static/img/icon/Signal50.png")
        } else if (this.info.csq_level < 28 && this.info.csq_level >= 25) {
          return require("@/pagesB/static/img/icon/Signal40.png")
        } else if (this.info.csq_level < 25 && this.info.csq_level >= 22) {
          return require("@/pagesB/static/img/icon/Signal30.png")
        } else if (this.info.csq_level < 22 && this.info.csq_level >= 19) {
          return require("@/pagesB/static/img/icon/Signal20.png")
        } else if (this.info.csq_level < 19 && this.info.csq_level >= 16) {
          return require("@/pagesB/static/img/icon/Signal10.png")
        } else {
          return require("@/pagesB/static/img/icon/Signal0.png")
        }
      } else {
        return require("@/pagesB/static/img/icon/Signal0.png")
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.device_item {
  display: flex;
  width: 220rpx;
  // border: 1px solid #000;
}

.card {
  padding: 20rpx;
  position: relative;

  .updata {

    // width: 100%;
    // border: 1px solid #000;
    // text-align: center;
    display: inline-block;
    width: 100%;

  }

  >view {
    font-size: $font-size-base;
    color: $textDarkGray;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }

    >view {
      display: flex;

      >view {
        &:last-child {
          color: $textBlack;
        }
      }

      .address {
        width: 500rpx;
      }
    }
  }

  .device-code {

    >view:nth-child(1) {

      width: 160rpx;
      text-align: justify;
      text-align-last: justify;
      // border: 1px solid #000;
    }
  }

  .stock {
    align-items: center;
    font-size: $font-size-xsmall;
    position: absolute;
    right: 10rpx;
    top: 20rpx;
    // border: 1px solid #000;
    align-items: flex-end;

    >view {
      >view {
        align-items: flex-end;
      }

      // border: 1px solid #000;
    }

    .stock_icond {
      width: 28rpx;
      height: 45rpx;
      margin-right: 6rpx;
      margin-left: 6rpx;
    }

    .stock_icons {
      width: 38rpx;
      height: 46rpx;
      margin-right: 6rpx;
      margin-left: 6rpx;
      vertical-align: bottom;

    }

    .stop_flex {
      // border: 1px solid #000;
      display: flex;
      margin-right: 5rpx;

      .stock_top {
        // border: 1px solid #000;

        image {
          vertical-align: bottom;
        }
      }


    }


    .stop_flex_s {
      .stock_top {

        // display: flex;
        text-align: center;
        font-size: 20rpx;
        // align-items: center;
        // border: 1px solid #000;

        // vertical-align: bottom;
        image {
          margin: auto;
          height: 20rpx;
          // border: 1px solid #000;
          width: 25rpx;
          // height: 100%;
          // width: 100%;
          vertical-align: bottom;
        }

        position: relative;

        .stock_buttom {
          font-size: 8rpx;
          position: absolute;
          left: 0rpx;
          top: -10rpx;
          width: 30rpx;
          height: 25rpx;
          // border: 1px solid #000;
          text-align: left;

        }
      }

    }

    .stock_top_d {
      // border: 1px solid #000;
      width: 35rpx;
      display: flex;
      position: relative;
      margin-right: 5rpx;

      // overflow: hidden;
      .stock_icond {
        margin: 0;
        padding: 0;
        width: 35rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        height: 46rpx;
      }

    }

    .stock_buttom {
      font-size: 16rpx;
      margin: 0 5rpx;

    }



    .stock_warn {
      // color: #ef0000;
      font-weight: bold;
    }

    .stock_adequate {
      color: $themeComColor;
    }

  }

  .stock_zhe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35rpx;
    height: 35rpx;
    background: #fb2020;
    z-index: 1;

  }

  .imgdis {
    position: absolute;
    right: 6px;
    bottom: 12px;
    width: 180rpx;
    height: 180rpx;

    // border: 1px solid #000;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .themeComColor {
    color: $themeComColor;
  }


}
</style>